<template>
  <div>
    <nly-breadcrumb>
      <nly-breadcrumb-item icon="nlyfont nly-icon-home-fill" to="/" text="首页" />
      <nly-breadcrumb-item icon="nlyfont nly-icon-outlet" to="/Prescription" active text="活动管理" />
    </nly-breadcrumb>

    <!-- Main content -->
    <section class="content" style="padding:0px 10px 0px 10px;">
      <Button type="primary" @click="create" style="margin:0px 20px 20px 20px">新增活动图</Button>
      <Table border size="small" :columns="tableheader" :data="datalist">
        <template slot-scope="{row}" slot="img">
          <img
            :src="row.img"
            class="image"
            style="height:90px;padding:5px;"
          />
        </template>
        <template slot-scope="{row}" slot="action">
          <Button
            size="small"
            @click="update(row)"
            type="primary"
            icon="ios-brush"
            style="margin-right:16px"
          >修改</Button>
          <Button type="error" icon="md-close" size="small" @click="remove(row.id)">删除</Button>
        </template>
      </Table>
    </section>
  </div>
</template>

<script>
import activity_api from "@/api/shop1";
export default {
  components: {},
  data() {
    return {
      tableheader: [
        {
          title: "ID",
          key: "id",
          width: 130,
          align: "center"
        },
        {
          title: "跳转路径",
          key: "skipUrl",
          align: "center",
          width: 200
        },
        {
          title: "图片",
          slot: "img",
          width: 350,
          align: "center"
        },
        // {
        //   title: "排序",
        //   key: "sort",
        //   width: 300,
        //   align: "center"
        // },
        {
          title: "创建时间",
          key: "createTime",
          align: "center",
          width: 300
        },
        {
          title: "操作",
          fixed: "right",
          slot: "action",
          width: 240,
          align: "center"
        }
      ],
      datalist: [],
      data: {
        p_tital: "",
        img: ""
      }
    };
  },
  created() {
    this.getSwiper();
  },
  methods: {
    getSwiper() {
      var _this = this;
      activity_api
        .getActivity({
          page:1,
          pageSize:100000
        })
        .then(response => {
          if (response.data.code === 0) {
            console.log("当前获取到的数据是" + response.data.data.records);
            _this.datalist = response.data.data.records;
          } else if (response.data.code === 201) {
            _this.datalist = null;
          }
        })
        .catch(error => {
          console.log(error);
          this.$Message.error("请求失败!");
        });
    },
    create() {
      this.$router.push("/shop/shopCreateActivity");
    },
    update(row) {
      this.$router.push({
        path: "/shop/shopCreateActivity",
        query: {
          row: row
        }
      });
    },
    remove(itemid) {
      this.$Modal.confirm({
        title: "提示",
        content: "确认要删除此项?删除后无法恢复",
        onOk: () => {
          activity_api
            .removeActivity({ id: itemid })
            .then(response => {
              console.log(response)
              if (response.data.code === 0) {
                this.$Message.success("删除成功");
                this.getSwiper();
              } else {
                this.$Message.error("删除失败!");
              }
            })
            .catch(error => {
              console.log(error);
              this.$Message.error("删除失败!");
            });
        }
      });
    }
  }
};
</script>

<style scoped>
.Page {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
</style>